{template "content","header"}
<link href="{CSS_PATH}hs/list_partner.css" rel="stylesheet" type="text/css" />
        <div id="main">
            <!--左侧相片部分-->
            <div class="col-left head scrollspy_intro">
                <ul class="nav setBoxHeight">
                    {pc:content  action="lists" catid="$catid" order="id ASC" cache=86400 num="25"}
                    <!--重组数组-->
                    {loop $data $k $v}
                        {php $lists[]=$v}
                    {/loop}
                    {loop $lists $k $v}
                        <li class='setBoxHeight {if $k==0}active{/if}'><a href="#item{$k}"><img src="{$v['thumb']}" alt="{$v['title']}" title="{$v['title']}"/></a></li>
                    {/loop}
                </ul>
            </div>
            <!--右侧详细介绍部分-->
            <div class="col-right introduction setBoxHeight" data-spy="scroll" data-target=".scrollspy_intro">
                <!--多加这层div是为了解决滚动条监听bug问题-->
                <div style="position: relative;padding:0px 20px 40px 0px;">
                    {loop $lists $k $v}
                    <div class="introItem setBoxHeight" id="item{$k}">
                        <h3 class="title" {title_style($v['style'])}>{$v['title']}</h3>
                        {pc:get sql="select * from v9_news_data where id=$v[id]" return="articles"/}
                            <p class="content">{$articles[0]['content']}</p>
                        {/pc}
                    </div>
                    {/loop}
                </div>
                {/pc}
            </div>
        </div>

        <input type="hidden" id="XXXXXXXXXXXXXX" value="1">
<script>
    $(function(){
        $('#main .scrollspy_intro .nav li').on('activate.bs.scrollspy', function () {
            var _self = $(this);
            var _index = _self.index();
            var total = $('#main .nav li').length;
            var nav_item_height = $('#main').height();
            var nav_top = nav_item_height*_index;
            $('#main .nav').stop().animate({'top':-nav_top+"px"},500);
        })
        $('#main .introduction').width($(window).width()-$('#main .head').outerWidth()-25);
        var nav_i = 0;
        var nav_total = $('#main .nav li').length;
        function _imageOnLoad(nav_i){
            var _img = $('#main .nav li').eq(nav_i).find('img').attr('src');
            imageReady(_img, function () {
            },function(){
                setImgPadding(nav_i);
            })
        }
        _imageOnLoad(nav_i);
        function setImgPadding(i){
            var _main_heigth = $('#main').height()/2;
            var _img = $('#main .nav li').eq(i).find('img');
            var img_height = _img.innerHeight();
            _img_top = img_height/2;
            if(_img_top>=_main_heigth){
                _img_top = _main_heigth;
            }
            _img.css({'margin-top':-_img_top});
            nav_i++;
            if(nav_i<nav_total){
                _imageOnLoad(nav_i);
            }
        }
    })
</script>
{template "content","footer"}